<template>
    <page-layout>
        <template v-slot:header>
            <el-button type='primary' size='small' @click="addEvt">新增</el-button>
        </template>

        <el-table :data="tableData"
            style="width: 100%"
            height="100%"
            size='small'>
            <el-table-column prop="shop_name" label="商铺名字" width="140" fixed/>
            <el-table-column prop="state" label="商品状态" width="100">
                <template v-slot="{ row: { state }}">
                    <div v-mystate="state"/>
                </template>
            </el-table-column>
            <el-table-column  prop="area"  label="经营区域" width="180"></el-table-column>
            <el-table-column prop="manager" label="店长" width="180"></el-table-column>
            <el-table-column  prop="remark" label="备注" width="180"></el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
                <template slot-scope="{ row }">
                    <el-button type="text" size="small" @click="detailEvt(row)">详情</el-button>
                    <el-button type="text" size="small" @click="editEvt(row)">编辑</el-button>
                    <el-button v-if='row.state==="N"' type="text" size="small" @click="changeEvt(row)">正常运营</el-button>
                    <el-button v-if='row.state==="Y"' type="text" size="small" @click="changeEvt(row)">暂停营业</el-button>
                </template>
            </el-table-column>
        </el-table>
    </page-layout>
</template>

<script>
import {shopListApi,shopUpdateApi} from '../../../apis/shopApi'
export default {
    data(){
        return{
            tableData: [],
            page:{
                "shop_id": "",
                "shop_name": "",
                "lng": "",
                "lat": "",
                "area": "",
                "address": "",
                "remark": "",
                'manager':''
            }
        }
    },
    directives: {
        mystate(el, {value}) {
            let obj = {
                N: {text: '暂停运营',cls:'shop-state'},
                Y: {text: '正常运营',cls:'shop-state stop'},
            }
            el.setAttribute('class', obj[value].cls)
            el.innerHTML = obj[value].text
        }
    },
    mounted(){
        this.getShopList()
    },
    methods:{
        detailEvt(data){
                this.$router.push({
                path:'/shop/detail',
                query:data
            })
        },
        editEvt(data){
            this.$router.push({
                path:'/shop/edit',
                query:data
            })
            console.log(data)
        },
        addEvt(){
            this.$router.push('/shop/edit')
        },
        async getShopList(){
            let result = await shopListApi(this.page)
            if(result.code===200){
                this.tableData = result.data.rows

            }
        },
        changeEvt(row){
            row.state==='Y'? row.state='N':row.state='Y'
                shopUpdateApi({...row, state: row.state === 'Y' ? 'N' : 'Y'}).then(d => {
                    if (d.code === 200) {
                        this.$message.success('操作成功')
                    } else {
                        this.$message.error('操作失败，请重试')
                    }
                })
        }
        
    }
}
</script>
<style lang="less" scoped>
    .shop-state {
        color: #999;
        &::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: #999;
            margin-right: 6px;
        }
        &.stop {
            color: #409EFF;
            &::before {
                background: #409EFF;
            }
        }

    }  
</style>